<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="配偶姓名" prop="name">
        <el-input v-model="pram.name" maxlength="20" placeholder="配偶姓名" />
      </el-form-item>
      <el-form-item label="身份证号" prop="id_card">
        <el-input v-model="pram.id_card" maxlength="20" placeholder="身份证号" />
      </el-form-item>
      <el-form-item label="结婚时间" prop="marriage_time">
        <el-date-picker
            v-model="pram.marriage_time"
            type="date"
            value-format="yyyy.MM"
            format="yyyy.MM"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="户籍" prop="household">
        <el-input v-model="pram.household" maxlength="20" placeholder="户籍（双军人填常驻地）" />
      </el-form-item>
      <el-form-item label="工作单位" prop="work">
        <el-input v-model="pram.work" maxlength="30" placeholder="工作单位" />
      </el-form-item>
      <el-form-item label="申请时间" prop="apply_time">
        <el-date-picker
            v-model="pram.apply_time"
            type="date"
            value-format="yyyy.MM"
            format="yyyy.MM"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="批准时间" prop="approve_time">
        <el-date-picker
            v-model="pram.approve_time"
            type="date"
            value-format="yyyy.MM"
            format="yyyy.MM"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">确定</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Debounce} from '@/utils/validate'
import { randomString } from '@/utils/utils'
export default {
  // name: "edit"
  components: { },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
  },
  emits:['separation','hideEditDialog'],
  data() {
    return {
      constants:this.$constants,
      pram: {
        id:null,
        name:'',
        id_card:'',
        marriage_time:'',
        household:'',
        work:'',
        apply_time:'',
        approve_time:'',
      },
      rules: {
        name: [{ required: true, message: '请填配偶姓名', trigger: ['blur', 'change'] }],
        id_card: [{ required: true, message: '请填身份证号', trigger: ['blur', 'change'] }],
        marriage_time: [{ required: true, message: '请填结婚时间', trigger: ['blur', 'change'] }],
        household: [{ required: true, message: '请填户籍', trigger: ['blur', 'change'] }],
        work: [{ required: true, message: '请填工作单位', trigger: ['blur', 'change'] }],
        apply_time: [{ required: true, message: '请填申请时间', trigger: ['blur', 'change'] }],
        approve_time: [{ required: true, message: '请填享受时间', trigger: ['blur', 'change'] }],
      },
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1){
        this.pram.id=randomString(32)
        return
      }
      const {id,name,id_card,marriage_time,household,work,apply_time,approve_time } = this.editData
      this.pram.id=id
      this.pram.name = name
      this.pram.id_card = id_card
      this.pram.marriage_time = marriage_time
      this.pram.household = household
      this.pram.work = work
      this.pram.apply_time = apply_time
      this.pram.approve_time = approve_time
    },

    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.$emit('separation',this.pram);
        this.close();
      })
    }),
  }
}
</script>

<style scoped>

</style>
